<template>
  <div class="md-editor-container" id="editor_el">
    <link rel="stylesheet" href="/editormd/css/editormd.min.css">
    <textarea :value="value" v-show="false"></textarea>
  </div>
</template>
<script>
const $s = require('scriptjs');

export default {
  name: 'Editor',
  props: {
    value: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'editor'
    }
  },
  data() {
    return {
      instance: null,
      editorConfig: {
        width: '100%',
        height: '100%',
        path: '/editormd/lib/',
        codeFold: true,
        saveHTMLToTextarea: true,
        searchReplace: true,
        htmlDecode: 'style,script,iframe|on*',
        emoji: true,
        atLink: false,
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "./php/upload.php?test=dfdf",
        onchange : () => {
          this.$emit('input', this.instance.getMarkdown());
          this.$emit('change',this.instance.getPreviewedHTML(),this.instance.getMarkdown());
        }
      }
    }
  },
  methods: {
    initEditor () {
      $s([
        '/editormd/jquery.min.js',
        '/editormd/lib/marked.min.js',
        '/editormd/lib/prettify.min.js',
        '/editormd/lib/raphael.min.js',
        '/editormd/lib/underscore.min.js',
      ], () => {
        $s('/editormd/editormd.min.js', () => {
         this.$nextTick((editorMD = window.editormd) => {
            if (!this.instance) {
              if (this.type === 'editor') {
              this.instance = editorMD('editor_el', this.editorConfig);
             } else {
              this.instance = editorMD.markdownToHTML('editor_el', this.editorConfig)
             }
            }
          });
        });
      });
    }
  },
  mounted() {
    this.initEditor();
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss">
  .linenums {
    white-space: nowrap;
    margin-top: 0;
    margin-bottom: 0;
  }
  .editormd .CodeMirror pre {
    font-size: 14px;
    padding: 0 33px;
  }

  .editormd-fullscreen {
    z-index: 99;
  }
</style>
